<div :class="$store.state.appPrefix + '-c-course-lesson-report'">
  <div class="title-box">
    <el-dropdown v-if="isFollow" @command="$handleCommand" placement="bottom-start">
      <div class="title-inner">
        <div class="title-text">第{{currExerciseNumber || 1}}次练习</div>
        <i class="el-icon-arrow-down"></i>
      </div>
      <el-dropdown-menu :class="$store.state.appPrefix + '-c-course-lesson-dropdown'" slot="dropdown">
        <el-dropdown-item :command="it.exerciseNumber" v-for="(it, idx) in exerciseList">
          <div>第{{ it.exerciseNumber || 1 }}次</div>
        </el-dropdown-item>
      </el-dropdown-menu>
    </el-dropdown>    
    <div v-else class="title-inner">
      <div class="title-text">第{{currExerciseNumber || 1}}次练习</div>
    </div>
    <div class="exercise-content">
      <div class="content-item">
        <div class="content-item-title">练习人员：</div>
        <div class="content-item-value">{{infos && infos.nickName}}</div>
      </div>
      <div class="content-item">
        <div class="content-item-title">完成时间：</div>
        <div class="content-item-value">{{infos && infos.finishTime}}</div>
      </div>
      <div class="content-item">
        <div class="content-item-title">用时：</div>
        <div class="content-item-value">{{infos && infos.useTime}}</div>
      </div>
      <div class="content-item">
        <div class="content-item-title">净语速：</div>
        <div class="content-item-value">{{infos && infos.wpmAvgVoiced}}字/分钟</div>
      </div>
    </div>
    <div class="restart-btn" @click="$previewVideo">
      <img src="assets/images/icon-video.png" alt="视频回放">
      视频回放
    </div>
    <div v-if="isFollow" class="start-btn" style="margin-left: 8px;">
      <img src="assets/images/icon-play.png" alt="再练一次">
      再练一次
    </div>
  </div>
  <div class="report-content">
    <div class="report-left">
      <div class="report-top">
        <div class="report-title">本次综合分</div>
        <chart-circle :progress="(infos && infos.comprehensiveScore) || 0"></chart-circle>
        <div class="report-score-box">
          <div class="report-score-item">
            <div class="report-score-item-title">历史最高分</div>
            <div class="report-score-item-value">{{infos && infos.maxScore}}</div>
          </div>
          <div class="report-score-item">
            <div class="report-score-item-title">历史平均分</div>
            <div class="report-score-item-value">{{infos && infos.avgScore}}</div>
          </div>
          <div class="report-score-item">
            <div class="report-score-item-title">练习及格分</div>
            <div class="report-score-item-value">{{infos && infos.passingScore}}</div>
          </div>
        </div>
      </div>
      <div class="report-bottom">
        <div class="report-title">历史趋势分析</div>
        <chart-line :dataList="infos.exerciseList"></chart-line>
      </div>
    </div>
    <div class="report-right">
      <div class="report-info">
        <div class="report-title">可视化分析图</div>
        <chart-radar
          :completeness="infos.completeness || 0"
          :accuracy="infos.fillWordsStuttering || 0"
          :fluency="infos.fluency || 0"
          :confidence="infos.confidence || 0"
          :speedVolume="infos.speedVolume || 0"></chart-radar>
        <div class="report-info-cards">
          <div v-for="(item, index) in reportCardList" :key="index" class="info-card">
            <div class="info-card-top">
              <div class="info-card-top-title">{{ item.title }}</div>
              <div class="progress-tag" :class="item.tagClass">{{ item.tag }}</div>
              <div class="info-card-top-empty"></div>
              <div class="progress-bar">
                <div class="progress-fill" :style="{ width: item.progress + '%', background: item.progressColor }"></div>
              </div>
              <div class="progress-number">{{ item.progress }}</div>
            </div>
            <div class="info-card-content">{{ item.content }}</div>
          </div>
        </div>
      </div>
    </div>
  </div>
  

  <video-preview-modal
   :visible="videoPreviewModalVisible"
    :video-url="videoInfo && videoInfo.url"
    :close-on-backdrop="true"
    @close="videoPreviewModalVisible = false"
    :screenshot-url="videoInfo && videoInfo.screenshotUrl"
  ></video-preview-modal>
</div>
